<!--
 * @Date: 2024-09-05 15:41:57
 * @Author: LiSong
 * @LastEditors: ljc
 * @LastEditTime: 2025-11-17 16:59:21
 * @Description: 弹框配置
-->
<template>
  <div class="widget-config-setting">
    <div class="setting-name">弹框配置</div>
    <div class="setting-body">
      <el-form-item :label="i18nt('designer.setting.dialogWidth')">
        <el-input type="text"
          v-model="optionModel.dialogConfig.width"></el-input>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.dialogHeight')">
        <el-input type="text"
          v-model="optionModel.dialogConfig.height"></el-input>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.dialogType')">
        <el-select v-model="optionModel.dialogConfig.type">
          <el-option v-for="item in dialogTypes"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.dialogTop')">
        <el-input type="text"
          v-model="optionModel.dialogConfig.top"></el-input>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.fullscreen')">
        <el-switch v-model="optionModel.dialogConfig.fullscreen"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.hierarchy')">
        <el-input type="text"
          v-model="optionModel.dialogConfig.zIndex"></el-input>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.resizable')">
        <el-switch v-model="optionModel.dialogConfig.resize"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.mask')">
        <el-switch v-model="optionModel.dialogConfig.mask"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.loading')">
        <el-switch v-model="optionModel.dialogConfig.loading"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.transfer')">
        <el-switch v-model="optionModel.dialogConfig.transfer"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.showZoom')">
        <el-switch v-model="optionModel.dialogConfig.showZoom"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.draggable')">
        <el-switch v-model="optionModel.dialogConfig.draggable"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.maskClosable')">
        <el-switch v-model="optionModel.dialogConfig.maskClosable"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.destroyOnClose')">
        <el-switch v-model="optionModel.dialogConfig.destroyOnClose"></el-switch>
      </el-form-item>
      <el-form-item :label="i18nt('designer.setting.showClose')">
        <el-switch v-model="optionModel.dialogConfig.showClose"></el-switch>
      </el-form-item>
    </div>
    <div class="setting-name">顶部配置</div>
    <div class="setting-body">
      <el-form-item :label="i18nt('designer.setting.showHeader')">
        <el-switch v-model="optionModel.dialogConfig.headerConfig.showHeader"></el-switch>
      </el-form-item>
      <template v-if="optionModel.dialogConfig.headerConfig.showHeader">
        <el-form-item :label="i18nt('designer.setting.title')">
          <el-input type="text"
            v-model="optionModel.dialogConfig.headerConfig.title"></el-input>
        </el-form-item>
        <el-form-item :label="i18nt('designer.setting.headerAlign')">
          <el-radio-group v-model="optionModel.dialogConfig.headerConfig.headerAlign"
            class="radio-group-custom">
            <el-radio-button value="left">
              {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
            <el-radio-button value="center">
              {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
            <el-radio-button value="right">
              {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item :label="i18nt('designer.setting.headerBgcColor')">
          <el-color-picker v-model="optionModel.dialogConfig.headerConfig.headerBgcColor"
            show-alpha />
        </el-form-item>
        <el-form-item :label="i18nt('designer.setting.titleFont')">
          <el-input type="text"
            v-model="optionModel.dialogConfig.headerConfig.titleFont"></el-input>
        </el-form-item>
        <el-form-item :label="i18nt('designer.setting.titleColor')">
          <el-color-picker v-model="optionModel.dialogConfig.headerConfig.titleColor"
            show-alpha />
        </el-form-item>
      </template>
    </div>
    <div class="setting-name">底部配置</div>
    <div class="setting-body">
      <el-form-item :label="i18nt('designer.setting.showFooter')">
        <el-switch v-model="optionModel.dialogConfig.footerConfig.showFooter"></el-switch>
      </el-form-item>
      <template v-if="optionModel.dialogConfig.footerConfig.showFooter">
        <el-form-item :label="i18nt('designer.setting.footerAlign')">
          <el-radio-group v-model="optionModel.dialogConfig.footerConfig.footerAlign"
            class="radio-group-custom">
            <el-radio-button value="left">
              {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
            <el-radio-button value="center">
              {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
            <el-radio-button value="right">
              {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-divider content-position="left">确认按钮配置</el-divider>
        <el-form-item :label="i18nt('designer.setting.showConfirm')">
          <el-switch v-model="optionModel.dialogConfig.footerConfig.showConfirm"></el-switch>
        </el-form-item>
        <template v-if="optionModel.dialogConfig.footerConfig.showConfirm">
          <el-form-item :label="i18nt('designer.setting.confirmAutoClose')">
            <el-switch v-model="optionModel.dialogConfig.footerConfig.confirmAutoClose"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.confirmLabel')">
            <el-input type="text"
              v-model="optionModel.dialogConfig.footerConfig.confirmLabel"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.confirmFont')">
            <el-input type="text"
              v-model="optionModel.dialogConfig.footerConfig.confirmFont"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.confirmColor')">
            <el-color-picker v-model="optionModel.dialogConfig.footerConfig.confirmColor"
              show-alpha />
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.confirmSize')">
            <el-select v-model="optionModel.dialogConfig.footerConfig.confirmSize">
              <el-option v-for="item in widgetSizes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.confirmWidth')">
            <el-input type="text"
              v-model="optionModel.dialogConfig.footerConfig.confirmWidth"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.confirmType')">
            <el-select v-model="optionModel.dialogConfig.footerConfig.confirmType">
              <el-option label="default"
                value=""></el-option>
              <el-option label="primary"
                value="primary"></el-option>
              <el-option label="success"
                value="success"></el-option>
              <el-option label="warning"
                value="warning"></el-option>
              <el-option label="danger"
                value="danger"></el-option>
              <el-option label="info"
                value="info"></el-option>
              <el-option label="text"
                value="text"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.confirmBgcColor')">
            <el-color-picker v-model="optionModel.dialogConfig.footerConfig.confirmBgcColor"
              show-alpha />
          </el-form-item>
        </template>
        <el-divider content-position="left">取消按钮配置</el-divider>
        <el-form-item :label="i18nt('designer.setting.showCancel')">
          <el-switch v-model="optionModel.dialogConfig.footerConfig.showCancel"></el-switch>
        </el-form-item>
        <template v-if="optionModel.dialogConfig.footerConfig.showCancel">
          <el-form-item :label="i18nt('designer.setting.cancelAutoClose')">
            <el-switch v-model="optionModel.dialogConfig.footerConfig.cancelAutoClose"></el-switch>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.cancelLabel')">
            <el-input type="text"
              v-model="optionModel.dialogConfig.footerConfig.cancelLabel"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.cancelFont')">
            <el-input type="text"
              v-model="optionModel.dialogConfig.footerConfig.cancelFont"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.cancelColor')">
            <el-color-picker v-model="optionModel.dialogConfig.footerConfig.cancelColor"
              show-alpha />
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.cancelSize')">
            <el-select v-model="optionModel.dialogConfig.footerConfig.cancelSize">
              <el-option v-for="item in widgetSizes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.cancelWidth')">
            <el-input type="text"
              v-model="optionModel.dialogConfig.footerConfig.cancelWidth"></el-input>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.cancelType')">
            <el-select v-model="optionModel.dialogConfig.footerConfig.cancelType">
              <el-option label="default"
                value=""></el-option>
              <el-option label="primary"
                value="primary"></el-option>
              <el-option label="success"
                value="success"></el-option>
              <el-option label="warning"
                value="warning"></el-option>
              <el-option label="danger"
                value="danger"></el-option>
              <el-option label="info"
                value="info"></el-option>
              <el-option label="text"
                value="text"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="i18nt('designer.setting.cancelBgcColor')">
            <el-color-picker v-model="optionModel.dialogConfig.footerConfig.cancelBgcColor"
              show-alpha />
          </el-form-item>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
import i18n from "@/utils/i18n"
export default {
  name: "dialogConfig-editor",
  mixins: [i18n],
  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },
  data() {
    return {
      dialogTypes: [
        { label: 'alert', value: 'alert' },
        { label: 'confirm', value: 'confirm' },
        { label: 'message', value: 'message' },
      ],
      widgetSizes: [
        { label: 'default', value: '' },
        { label: 'large', value: 'large' },
        //{label: 'medium', value: 'medium'},
        { label: 'small', value: 'small' },
        //{label: 'mini', value: 'mini'},
      ],
    }
  },
  created() {

  },
  mounted() {

  },
  computed() {

  }
}

</script>

<style lang="scss" scoped>
.radio-group-custom {
  :deep(.el-radio-button__inner) {
    padding-left: 12px;
    padding-right: 12px;
  }
}
:deep(.el-divider__text) {
  font-size: 12px;
}
</style>
